<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷</title>
    <style>
        .block_container {
            width: 890px;
            display: flex;
            flex-wrap: wrap;
        }

        .single_block {
            width: 10%;
            height: 80px;
            background-color: gray;
            box-sizing: border-box;
            padding: 10px;
            background-clip: content-box;
            white-space: pre;
            font-size: 12px;
            cursor: pointer;
        }

        .luck {
            line-height: 60px;
            color: white;
            text-align: center;
            font-size: 25px;
        }

        .dead {
            line-height: 60px;
            color: black;
            text-align: center;
            font-size: 25px;
            background-color: red;
        }

        .desk {
            float: right;
        }
    </style>
</head>

<body>
    <div class="desk">
        <h2>指令</h2>
        <button click="downCount()">倒数</button>
    </div>
    <div class="block_container" id="block_container">

    </div>

    <script>
        let verticalBlocks = 10
        let horizontalBlocks = 10
        let bombs = 10
        let blocks = []
        let amountOfBlocks = verticalBlocks * horizontalBlocks
        let scencData = []

        for (let i = 1; i <= amountOfBlocks; i++) {
            scencData[i - 1] = {
                x: 0,
                y: 0,
                index: i,
                isBomb: false,
                isMark: false
            }
        }

        let recordBomb = 0
        while (recordBomb < bombs) {
            let scencIndex = parseInt(Math.random() * (100 - 1 + 1) + 1)
            console.error('警告：第' + scencIndex + '个是炸弹')
            if (scencData[scencIndex - 1].isBomb) { continue }
            scencData[scencIndex - 1].isBomb = true
            recordBomb++
        }

        let currentX = 1
        for (let i = 1; i <= amountOfBlocks; i++) {
            let block = document.createElement('div')
            block.className = 'single_block'
            let blockStr = i + '\n'
            blockStr = blockStr + '(x=' + currentX + ',y=' + parseInt(i / 10) + ')'
            block.textContent = blockStr
            document.getElementById('block_container').appendChild(block)
            /*if (scencData[i - 1].isBomb) {
                block.style.backgroundColor = 'red'
            }*/
            blocks.push(block)
            scencData[i - 1].x = currentX
            scencData[i - 1].y = parseInt(i / 10)
            if (currentX == 10) {
                currentX = 1
            } else {
                currentX++
            }
        }

        document.querySelectorAll('.single_block').forEach(item => {
            item.oncontextmenu = function (e) {
                e.preventDefault()
            }
            /*item.onmouseup = function (e) {
                if (!e) oEvent = window.event;
                if (e.button == 2) {
                    item.style.backgroundColor = 'yellow'
                }
            }*/
        })

        for (let i = 0; i < amountOfBlocks; i++) {
            document.getElementsByClassName('single_block')[i].addEventListener('click', function () {
                if (scencData[i].isBomb == true) {
                    alert('游戏结束，你踩雷了')
                    blocks[i].textContent = '倒霉'
                    blocks[i].classList.add('dead')
                    for (let bi = 0; bi < blocks.length; bi++) {
                        if (scencData[bi].isBomb) {
                            blocks[bi].style.backgroundColor = 'red'
                        }
                    }
                } else {

                    /*if((scencData[i].index-1)%10==0){
                        console.log('靠左边')
                    }
                    if((scencData[i].index+1)%10==1){
                        console.log('靠右边')
                    }
                    if(scencData[i].index+10>100){
                        console.log('靠底边')
                    }
                    if(scencData[i].index-10<0){
                        console.log('靠顶边')
                    }*/
                    /*let topAxis=false
                    let bottomAxis=false
                    let leftAxis=false
                    let rightAxis=false*/
                    /*console.log(scencData[i - 10])
                    console.log(scencData[i + 10])
                    console.log(scencData[i - 1])
                    console.log(scencData[i + 1])*/




                    let surroundBombs = 0
                    blocks[i].style.backgroundColor = 'green'

                    if (scencData[i + 1] != undefined) {
                        if (scencData[i + 1].index % 10 == 1) {
                            console.log('靠右边')
                            //rightAxis=true
                        } else {
                            if (scencData[i + 1].isBomb)
                                surroundBombs++
                        }
                    }
                    if (scencData[i - 1] != undefined) {
                        if (scencData[i - 1].index % 10 == 0) {
                            console.log('靠左边')
                            //leftAxis=true
                        } else {
                            if (scencData[i - 1].isBomb)
                                surroundBombs++
                        }
                    }
                    if (scencData[i + 10] != undefined) {
                        if (scencData[i + 10].isBomb) {
                            surroundBombs++
                        }
                    }
                    if (scencData[i - 10] != undefined) {
                        if (scencData[i - 10].isBomb) {
                            surroundBombs++
                        }
                    }

                    blocks[i].textContent = '安全'
                    blocks[i].classList.add('luck')
                    if (surroundBombs != 0) {
                        blocks[i].textContent = surroundBombs
                    }
                }
            })
            document.getElementsByClassName('single_block')[i].onmouseup = function (e) {
                if (!e) oEvent = window.event;
                if (e.button == 2) {
                    if (document.getElementsByClassName('single_block')[i].style.backgroundColor == 'yellow') {
                        document.getElementsByClassName('single_block')[i].style.backgroundColor = 'gray'
                        console.log('取消标记了一个炸弹')
                        scencData[i].isMark = false
                    } else {
                        document.getElementsByClassName('single_block')[i].style.backgroundColor = 'yellow'
                        console.log('成功标记了一个炸弹')
                        scencData[i].isMark = true
                    }

                }
            }
        }
        function downCount() {
            let ten = [12, 22, 32, 42, 52, 62, 72, 14, 24, 34, 44, 54, 64, 74, 17, 27, 37, 47, 57, 67, 77, 15, 16, 75, 76]
            let nine = [14, 24, 34, 44, 74, 17, 27, 37, 47, 57, 67, 77, 15, 16, 45, 46, 75, 76]
            let seven = [14, 15, 16, 17, 27, 37, 47, 57, 67, 77]
            let six = [14, 24, 34, 44, 74, 17, 47, 57, 67, 77, 15, 16, 45, 46, 75, 76]
            let five = [14, 24, 34, 44, 74, 17, 27, 37, 47, 57, 67, 77, 15, 16, 45, 46, 75, 76]
        }
    </script>
</body>

</html>